<route>
    {
        meta: {
            layout: 'index',
            title:'电缆张力监控装置信息管理'
        }
    }  
</route>
<template>
    <view>
        <div class="app-container">
            <a-row>
                <a-input-search v-model:value="searchKey" placeholder="请输入电缆电缆张力监控装置信息" enter-button="搜索"
                    style="width: 250px; margin-bottom: 10px;" @search="handleQuery()" />
                <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
                <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;" @click="addItem">
                    <template #icon><plus-outlined /></template>新增
                </a-button>
            </a-row>

            <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 1000 }" bordered :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <!-- string -->
                    <template
                        v-if="['name', 'type', 'cableRange', 'location', 'implementationMethod'].includes(column.dataIndex)">
                        <div>
                            <a-input v-if="editableData[record.id]"
                                v-model:value="editableData[record.id][column.dataIndex]"
                                style="margin: -5px 0; width: 100%;" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <!-- double -->
                    <template v-if="[].includes(column.dataIndex)">
                        <div>
                            <a-input-number v-if="editableData[record.id]"
                                v-model:value="editableData[record.id][column.dataIndex]" :min="0"
                                style="margin: -5px 0;width: 100%;" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'action'">
                        <div>
                            <span v-if="editableData[record.id]">
                                <a-button type="link" @click="save(record.id)">保存 </a-button>
                                <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                    <a-button type="link">取消</a-button>
                                </a-popconfirm></AntdZh>
                            </span>
                            <span v-else>
                                <a-button type="link" @click="edit(record.id)">编辑</a-button>
                                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                    <a-button type="link" danger>删除</a-button>
                                </a-popconfirm></AntdZh>
                            </span>
                        </div>
                    </template>
                </template>
            </a-table>
            <AntdZh>
                <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                    @change="getList" />
            </AntdZh>

            <!-- 新版添加或修改部门对话框 -->
            <AntdConfirmModal title="新增电缆张力监控装置" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
                <a-form :model="form" name="basic" :label-col="{ span: 10 }">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="名称" name="name">
                                <a-input v-model:value="form.name" style="width: 150px;" placeholder="请输入名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="规格型号" name="type">
                                <a-input v-model:value="form.type" style="width: 150px;" controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="范围" name="cableRange">
                                <a-input v-model:value="form.cableRange" style="width: 150px;" controls-position="right"
                                    :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="位置" name="location">
                                <a-input v-model:value="form.location" style="width: 150px;" controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="实现方式" name="implementationMethod">
                                <a-input v-model:value="form.implementationMethod" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </AntdConfirmModal>
        </div>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList, deleteOne, updateOne, createOne } from "@/api/tool/cableTensionMonitoring";
import { PlusOutlined } from '@ant-design/icons-vue';
import request from '@/utils/request'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const total = ref(1)
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
const editableData = reactive({});
//定义表格列配置
const columns = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: 100
    },
    {
        title: '规格型号',
        dataIndex: 'type',
        key: 'type',
        width: 100
    },
    {
        title: '范围',
        dataIndex: 'cableRange',
        key: 'cableRange',
        width: 100
    },
    {
        title: '位置',
        dataIndex: 'location',
        key: 'location',
        width: 100
    },
    {
        title: '实现方式',
        dataIndex: 'implementationMethod',
        key: 'implementationMethod',
        width: 100
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        width: 160
    }
];


// 保存
const save = key => {
    updateOne(editableData[key]).then(res => {
        console.log('save', res);
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
};
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};

//编辑
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
};
// 新增
function addItem() {
    form.value = {}
    modalRef.value.openModal()
}

/** 提交按钮 */
function submitForm() {
    console.log('form.value', form.value);
    createOne(form.value).then(res => {
        console.log('createOne', res)
        modalRef.value.closeModal();
        getList()
    })
}

/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();


/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 5, sortBy: 'id',
        searchKey: '',
    }
    getList();
}
</script>